<template>
	<view class="profile-container">
		<!-- Header with profile info -->
		<view class="header rounded-bottom">
			<!-- Background with pattern -->
			<view class="header-bg">
				<view class="header-pattern"></view>
			</view>

			<!-- Profile container -->
			<view class="profile-info">
				<view class="avatar-container">
					<image class="avatar-image" :src="avatarUrl" mode="aspectFill"></image>
				</view>

				<view class="user-info">
					<text class="user-name">{{ user.name }}</text>
					<view class="org-badge">
						<text class="org-name">{{ user.orgName }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Main content with menu items -->
		<view class="main-content">
			<view class="menu-list">
				<view class="menu-item" @click="navigateTo('/pages/bulletin/bulletin')">
					<view class="icon-container notification-icon">
						<!-- Bell icon SVG -->
						<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="icon">
							<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
							<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
						</svg>
					</view>
					<view class="menu-text">
						<text class="menu-title">通知公告</text>
						<text class="menu-subtitle">查看最新通知和公告</text>
					</view>
					<view class="chevron-container">
						<!-- ChevronRight icon SVG -->
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="chevron-icon">
							<path d="m9 18 6-6-6-6"></path>
						</svg>
					</view>
				</view>

				<view class="menu-item" @click="navigateTo('/pages/center/pwd')">
					<view class="icon-container password-icon">
						<!-- Key icon SVG -->
						<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="icon">
							<path
								d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4">
							</path>
						</svg>
					</view>
					<view class="menu-text">
						<text class="menu-title">修改密码</text>
						<text class="menu-subtitle">更新您的账户密码</text>
					</view>
					<view class="chevron-container">
						<!-- ChevronRight icon SVG -->
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="chevron-icon">
							<path d="m9 18 6-6-6-6"></path>
						</svg>
					</view>
				</view>

				<view v-if="custom.title" class="menu-item" @click="navigateTo('/pages/selfStudy/selfStudy')">
					<view class="icon-container custom-icon">
						<!-- User icon SVG -->
						<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="icon">
							<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
							<circle cx="12" cy="7" r="4"></circle>
						</svg>
					</view>
					<view class="menu-text">
						<text class="menu-title">学情分析</text>
						<text class="menu-subtitle">查看学情分析</text>
					</view>
					<view class="chevron-container">
						<!-- ChevronRight icon SVG -->
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="chevron-icon">
							<path d="m9 18 6-6-6-6"></path>
						</svg>
					</view>
				</view>
			</view>

			<!-- Moved Logout Button -->
			<!-- <button class="logout-button" @click="handleLogout">
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
					stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
					class="logout-icon">
					<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
					<polyline points="16 17 21 12 16 7"></polyline>
					<line x1="21" y1="12" x2="9" y2="12"></line>
				</svg>
				<text class="logout-text">退出登录</text>
			</button> -->
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// Avatar URL
const avatarUrl = ref('');

// User data
const user = reactive({
	id: null,
	name: '张子轩',
	loginName: '',
	orgName: '学生'
});

// Custom data
const custom = reactive({
	title: '自定义',
	content: 'View your personal settings'
});

// Fetch user data
const fetchUserData = async () => {
	try {
		// In a real app, this would be an API call
		// For demo purposes, we'll just use the default values

		// If you need to make actual API calls:
		// const res = await uni.request({
		//   url: 'your-api-endpoint',
		//   method: 'GET'
		// });
		// if (res.statusCode === 200) {
		//   Object.assign(user, res.data.user);
		//   Object.assign(custom, res.data.custom);
		// }
	} catch (error) {
		console.error('Error fetching user data:', error);
	}
};

// Navigation function
const navigateTo = (path) => {
	uni.navigateTo({
		url: path
	});
};

// Logout function
const handleLogout = () => {
	// Handle logout logic
	console.log('Logging out...');

	// In a real app, you would clear tokens, etc.
	// Then redirect to login page
	uni.redirectTo({
		url: '/pages/login/login'
	});
};

// Lifecycle hook
onMounted(() => {
	fetchUserData();
});
</script>

<style>
/* Main container */
.profile-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f8fafc;
}

/* Header styles */
.header {
	position: relative;
	height: 208rpx;
	/* 52px * 4 */
	overflow: hidden;
}

.rounded-bottom {
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
}

.header-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to right, #2563eb, #38bdf8);
}

.header-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.2;
	/* Pattern created with radial gradients */
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
	background-size: 20px 20px;
}

.profile-info {
	position: relative;
	display: flex;
	align-items: center;
	padding: 56rpx 32rpx;
	z-index: 1;
}

.avatar-container {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	overflow: hidden;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.avatar-image {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}

.user-info {
	margin-left: 20rpx;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
}

.org-badge {
	margin-top: 8rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	padding: 4rpx 16rpx;
	display: inline-block;
}

.org-name {
	font-size: 24rpx;
	color: #ffffff;
}

/* Main content styles */
.main-content {
	flex: 1;
	margin-top: -24rpx;
	padding: 0 24rpx 48rpx;
	/* Added bottom padding */
}

.menu-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	padding: 24rpx 0;
}

.menu-item {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 32rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.icon-container {
	width: 56rpx;
	height: 56rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.notification-icon {
	background: linear-gradient(135deg, #f43f5e, #fb7185);
}

.password-icon {
	background: linear-gradient(135deg, #3b82f6, #22d3ee);
}

.custom-icon {
	background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.icon {
	color: #ffffff;
}

.menu-text {
	flex: 1;
}

.menu-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #1e293b;
	display: block;
}

.menu-subtitle {
	font-size: 24rpx;
	color: #94a3b8;
	margin-top: 4rpx;
	display: block;
}

.chevron-container {
	display: flex;
	align-items: center;
}

.chevron-icon {
	color: #cbd5e1;
}

/* Footer styles removed */

.logout-button {
	/* Added margin-top */
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56rpx;
	border-radius: 32rpx;
	background: linear-gradient(to right, #ef4444, #f97316);
	border: none;
	padding: 24rpx 0;
	box-shadow: 0 4rpx 12rpx rgba(239, 68, 68, 0.3);
}

.logout-icon {
	color: #ffffff;
	margin-right: 8rpx;
}

.logout-text {
	font-size: 32rpx;
	font-weight: 500;
	color: #ffffff;
}
</style>